import {createApp, reactive, ref, computed, watch} from "../../../../../js/vue.esm-browser.js";

export default createApp({
    setup() {
        let info = reactive([
            {
                id: 1,
                name: "《算法导论》",
                date: "2010-10-22",
                price: 126.99,
                count: 1,
            },
            {
                id: 2,
                name: "《Java 面向对象》",
                date: "2010-10-22",
                price: 90.99,
                count: 1,
            },
            {
                id: 3,
                name: "《JavaScript 编程指南》",
                date: "2022-10-22",
                price: 79.99,
                count: 1,
            },
            {
                id: 4,
                name: "《MySQL 入门》",
                date: "2018-09-22",
                price: 166.99,
                count: 1,
            },
            {
                id: 5,
                name: "《Vue 的设计艺术》",
                date: "2022-11-18",
                price: 126.99,
                count: 1,
            },

        ])

        // 减少购买数量
        function removeItem(index) {
            // console.log(index);
            info.splice(index, 1)
        }

        // 增加购买数量
        function increaseItem(index) {
            info[index].count++
        }

        function decreaseItem(index) {
            info[index].count--
        }

        let totalPrice = computed(
            function () {
                let sum = 0
                for (let i = 0; i < info.length; i++) {
                    sum += info[i].price * info[i].count
                }
                return sum.toFixed(2)
            })


        return {
            info,
            removeItem,
            increaseItem,
            decreaseItem,
            totalPrice,

        }
    }
}).mount("#app")